<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
          offsetWidth 不算margin的宽度
          offsetHeight
          offsetLeft  根据能看到的 第一个有定位的来算
          offsetTop
        */
       window.onload = function(){
           console.time("test1");
           //98.7587890625 ms
           for(var i = 0;i<100000;i++){
               var newDiv = document.createElement("div");
               document.body.appendChild(newDiv);
           }
           console.timeEnd("test1");

           console.time("test2");
           //77.7451171875 ms   文档碎片操作
           var node = document.createElement("div");
           for(var i = 0;i<100000;i++){
               var newDiv = document.createElement("div");
               node.appendChild(newDiv);
           }
           document.body.appendChild(node);
           console.timeEnd("test2");
       }
    </script>
</head>
<body>
    
</body>
</html>